<template>
  <div class="baseinfo c-shadow">
    <h4 class="detail-base-title">工商信息</h4>
    <div class="table-wrap">
      <table class="business">
        <tr>
          <th>统一社会信用代码</th>
          <td>{{businessData.societyCode||'--'}}</td>
          <th>组织机构代码</th>
          <!-- TODO: -->
          <td>--</td>
        </tr>
        <tr>
          <th>注册号</th>
          <td>{{businessData.registationNo||'--'}}</td>
          <th>经营状态</th>
          <td>{{businessData.registerStatus||'--'}}</td>
        </tr>
        <tr>
          <th>所属行业</th>
          <!-- TODO: -->
          <td>--</td>
          <th>成立日期</th>
          <!-- TODO: -->
          <td>--</td>
        </tr>
        <tr>
          <th>公司类型</th>
          <td>{{businessData.type||'--'}}</td>
          <th>营业期限</th>
          <td>{{businessData.operatingPeriodStart| dateFormat}}/{{businessData.operatingPeriodEnd| dateFormat}}</td>
        </tr>
        <tr>
          <th>法定代表人</th>
          <td>{{businessData.legalPerson||'--'}}</td>
          <th>发照日期</th>
          <!-- TODO: -->
          <td>--</td>
        </tr>
        <tr>
          <th>注册资本</th>
          <td>{{(businessData.money||'--')+''+(businessData.moneyCurrency||'')}}</td>
          <th>登记机关</th>
          <td>{{businessData.registerOrganization||'--'}}</td>
        </tr>
        <tr>
          <th>企业地址</th>
          <td colspan="3" class="long">{{businessData.location||'--'}}</td>
        </tr>
        <tr>
          <th>经营范围</th>
          <td colspan="3" class="long">{{businessData.businessScope||'--'}}</td>
        </tr>
      </table>
    </div>
    <h4 class="detail-base-title">股东信息<span>{{shareholderData.length}}</span></h4>
    <j-no-data v-if="shareholderData.length === 0" :mode="'b'" msg="b"></j-no-data>
    <div v-else class="table-wrap">
      <table>
        <thead>
          <tr>
            <th v-for="title in shareholderTitle" :key="title">{{title}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in shareholderData" :key="index">
            <td>{{item.type}}</td>
            <td class="text-left">{{item.name}}</td>
            <td>{{item.paid_amount|nulldie}}<span>/</span>{{item.paid_date|nulldie}}</td>
            <td>{{item.subscribed_amount|nulldie}}<span>/</span>{{item.subscribed_date|nulldie}}</td>
          </tr>
        </tbody>
      </table>
      <div class="clearFix paging-wrap">
        <el-pagination
        v-if="shareholderPager.total>10"
          class="fr "
          @current-change="shareholderPaging"
          :current-page.sync="shareholderPager.pageNum"
          :page-size="shareholderPager.pageSize"
          layout="prev, pager, next, jumper"
          :total="shareholderPager.total">
        </el-pagination>
      </div>
    </div>
    <h4 class="detail-base-title">主要人员<span>{{majorPerson.length}}</span></h4>
    <j-no-data v-if="majorPerson.length === 0" :mode="'b'" msg="b"></j-no-data>
    <div class="table-wrap">
      <table>
        <tr v-for="item in majorPerson" :key="item.id">
          <th>{{item.department}}</th>
          <td>{{item.name}}</td>
          <th>{{item.department1||''}}</th>
          <td>{{item.name1||''}}</td>
        </tr>
      </table>
    </div>
    <h4 class="detail-base-title">工商变更<span>{{businessChangeData.length}}</span></h4>
    <j-no-data v-if="businessChangeData.length === 0" :mode="'b'" msg="b"></j-no-data>
    <div v-else class="table-wrap">
      <table class="business-change">
        <thead>
          <tr>
            <th v-for="title in businessChange" :key="title">{{title}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in businessChangeData" :key="item.before">
            <td class="text-c" width=74>{{index+1}}</td>
            <td style="width:200px;">{{item.changeDate | dateFormat}}</td>
            <td style="width:208px;">{{item.changeItem}}</td>
            <td>{{item.changeBefore}}</td>
            <td>{{item.changeAfter}}</td>
          </tr>
        </tbody>
      </table>
      <div class="clearFix paging-wrap">
        <el-pagination
        v-if="businessPager.total>10"
          class="fr "
          @current-change="entchangePaging"
          :current-page.sync="businessPager.pageNum"
          :page-size="businessPager.pageSize"
          layout="prev, pager, next, jumper"
          :total="businessPager.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { entdetail as api } from '../../api'
import { jNoData } from '../../components'
export default {
  data() {
    return {
      // 分页的当前页数
      currentPage3: 1,
      shareholderTitle: [
        '股东类型',
        '股东',
        '认缴出资(金额/时间)',
        '实缴出资(金额/时间)'
      ],
      businessChange: ['序号', '变更日期', '变更事项', '变更前', '变更后'],
      businessData: {},
      majorPerson: [],
      shareholderData: [],
      businessChangeData: [],
      shareholderPager: {
        total: 0,
        pageSize: 10,
        pageNum: 1
      },
      businessPager: {
        total: 0,
        pageSize: 10,
        pageNum: 1
      },
      params: {
        pageSize: 10,
        pageNum: 1
      }
    }
  },
  mounted() {
    this.params.entName = this.$route.query.entname
    this.params.entId = 1
    this.getbusinessData()
    this.getshareHolder()
    this.getMajorperson()
    this.getEntchange()
  },
  methods: {
    handleSizeChange() {
      // 当pagesize改变的时候出发该函数
    },
    handleCurrentChange() {
      // 当切换页码的时候出发的函数
    },
    // 工商信息
    getbusinessData() {
      api.getBusinessInfo(this.params).then(ret => {
        this.businessData = ret.data
      })
    },
    // 股东信息
    getshareHolder(param) {
      if (param) {
        this.params = Object.assign(this.params, param)
      }
      api.getShareholder(this.params).then(ret => {
        this.shareholderData = ret.data.list
        this.shareholderPager.total = ret.data.total
        // this.shareholderData.forEach(item => {
        //   if (item.paid_amount) {
        //     item.paid_amount = item.paid_amount.replace(/(null)*( )*(;)*/g, '')
        //   }
        //   if (item.paid_date) {
        //     item.paid_date = item.paid_date.replace(/(null)*( )*(;)*/g, '')
        //   }
        //   if (item.subscribed_amount) {
        //     item.subscribed_amount = item.subscribed_amount.replace(
        //       /(null)*( )*(;)*/g,
        //       ''
        //     )
        //   }
        //   if (item.subscribed_date) {
        //     item.subscribed_date = item.subscribed_date.replace(
        //       /(null)*( )*(;)*/g,
        //       ''
        //     )
        //   }
        // })
      })
    },
    // 主要人员
    getMajorperson() {
      api.getMajorPerson(this.params).then(ret => {
        var data = ret.data.list
        if (data.length > 0) {
          for (var i = 0; i < data.length; i += 2) {
            var item = {
              department: data[i].department,
              name: data[i].name,
              department1: i + 1 < data.length ? data[i + 1].department : null,
              name1: i + 1 < data.length ? data[i + 1].name : null
            }
            this.majorPerson.push(item)
          }
          // console.log(this.majorPerson)
        }
      })
    },
    // 工商变更
    getEntchange(param) {
      if (param) {
        this.params = Object.assign(this.params, param)
      }
      api.getEntchange(this.params).then(ret => {
        this.businessChangeData = ret.data
        this.businessPager.total = ret.data.length
      })
    },
    entchangePaging(index) {
      this.businessPager.pageNum = index
      this.getEntchange(this.businessPager)
    },
    shareholderPaging(index) {
      this.shareholderPager.pageNum = index
      this.getshareHolder(this.shareholderPager)
    }
  },
  components: {
    jNoData
  }
}
</script>
<style lang="scss" scoped>
.baseinfo {
  .text-left {
    text-align: left;
    padding-left: 20px;
  }
  padding: 0 20px;
  h4.detail-base-title {
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    padding: 30px 0 0 12px;
    position: relative;
    background-image: linear-gradient(0deg, #1891ef, #1891ef);
    background-size: 3px 16px;
    background-position: 0 37px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #eee;
  }
  h4.detail-base-title span {
    border: 1px solid #9dc5fd;
    border-radius: 10px;
    color: #1688f3;
    background: #f2f7ff;
    font-size: 12px;
    padding: 0 10px;
    margin-left: 15px;
    vertical-align: top;
  }
  .table-wrap {
    padding: 30px 20px;
    table {
      border-collapse: collapse;
      width: 100%;
      text-align: center;
      td,
      th {
        border: 1px solid #e2e2e2;
        line-height: 40px;
      }
      th {
        line-height: 38px;
        color: #999;
        background: #f2f1f1;
      }
      td.long {
        text-align: left;
        padding: 10px;
        line-height: 24px;
      }
      &.business {
        th {
          width: 232px;
        }
        td {
          text-align: left;
          padding-left: 20px;
        }
      }
      &.business-change {
        th,
        td {
          line-height: 16px;
          padding: 10px 18px;
          word-wrap: break-word;
          word-break: break-all;
          white-space: normal;
        }
        th:first-child {
          width: 50px;
        }
        th:nth-of-type(2) {
          width: 140px;
        }
        td {
          text-align: left;
        }
        td.text-c {
          text-align: center;
        }
      }
    }
  }
}
</style>



// WEBPACK FOOTER //
// src/view/relationDetail/baseInfo.vue